import React, {useEffect} from 'react';

import './index.less'

/**
 * Home函数组件，props为无状态组件（即函数）的第一个参数 function Comp(props){}
 * @param {*} props 
 */
function Home (props) {

    /**
     * useEffect的第二个参数，传入的是空数组时，可以实现componentWillUnmount方法，就是当组件被销毁时进行解绑；
     */
    useEffect(() => {
        console.log('useEffect=>从hooks来')
        return () => {
            console.log('离开了home页面')
        }
    },[])
    return (
        <div className="home-content">
            <ul>
                <li>
                    <button onClick={()=> {props.history.push("/hooks")}}>去往hooks学习</button>
                </li>
                <li>
                    <button onClick={()=> {props.history.push("/techology")}}>react开发技巧</button>
                </li>
                <li>
                    <button onClick={()=> {props.history.push("/mobx")}}>mobx学习</button>
                </li>
                
            </ul>
        </div>
    )
}

export default Home